// import React, { Component, useState } from "react";
import React, { Component, useState } from "react";
import * as echarts from "echarts";
import "./index.scss";
import { Slider, Switch } from "antd";

export default class Lifetime extends Component {
  state = {
    inputValue: 5, //心态
    inputValue1: 5, //情绪
    inputValue2: 5, //身体
    inputValue3: 5, //作息
    inputValue4: 5, //饮食
    inputValue5: 5, //习惯
    data: [
      { value: 60, name: "基本寿命\n（无意外）" },
      { value: 15, name: "心态" },
      { value: 10, name: "情绪" },
      { value: 10, name: "身体" },
      { value: 5, name: "作息" },
      { value: 5, name: "饮食" },
      { value: 5, name: "习惯" },
      {
        value: 50,
        name: "剩余",
        itemStyle: {
          color: "#aaa",
        },
      },
    ],
    life: 105, //生命,
    menu:JSON.parse(localStorage.getItem("settings")) || {}// 获取本地存储内容
  };

  // 心态
  onChange = (e) => {
    this.state.data[1].value = e * 2;
    this.state.data[7].value =
      150 -
      (Math.ceil(this.state.data[0].value) +
        Math.ceil(this.state.data[1].value) +
        Math.ceil(this.state.data[2].value) +
        Math.ceil(this.state.data[3].value) +
        Math.ceil(this.state.data[4].value) +
        Math.ceil(this.state.data[5].value) +
        Math.ceil(this.state.data[6].value));
    console.log(
      Math.ceil(this.state.data[0].value) +
        Math.ceil(this.state.data[1].value) +
        Math.ceil(this.state.data[2].value) +
        Math.ceil(this.state.data[3].value) +
        Math.ceil(this.state.data[4].value) +
        Math.ceil(this.state.data[5].value) +
        Math.ceil(this.state.data[6].value),
      38
    );
    this.setState({
      inputValue: e,
      data: this.state.data,
    });
    this.cenrty();
  };
  // 情绪
  onChange1 = (e) => {
    this.state.data[2].value = e * 2;
    this.state.data[7].value =
      150 -
      (Math.ceil(this.state.data[0].value) +
        Math.ceil(this.state.data[1].value) +
        Math.ceil(this.state.data[2].value) +
        Math.ceil(this.state.data[3].value) +
        Math.ceil(this.state.data[4].value) +
        Math.ceil(this.state.data[5].value) +
        Math.ceil(this.state.data[6].value));
    this.setState({
      inputValue1: e,
      data: this.state.data,
    });
    this.cenrty();
  };

  // 身体
  onChange2 = (e) => {
    this.state.data[3].value = e * 2;
    this.state.data[7].value =
      150 -
      (Math.ceil(this.state.data[0].value) +
        Math.ceil(this.state.data[1].value) +
        Math.ceil(this.state.data[2].value) +
        Math.ceil(this.state.data[3].value) +
        Math.ceil(this.state.data[4].value) +
        Math.ceil(this.state.data[5].value) +
        Math.ceil(this.state.data[6].value)); 
    this.setState({
      inputValue2: e,
      data: this.state.data,
    });
    this.cenrty();
  };
  // 作息
  onChange3 = (e) => {
    this.state.data[4].value = e * 1;
    this.state.data[7].value =
      150 -
      (Math.ceil(this.state.data[0].value) +
        Math.ceil(this.state.data[1].value) +
        Math.ceil(this.state.data[2].value) +
        Math.ceil(this.state.data[3].value) +
        Math.ceil(this.state.data[4].value) +
        Math.ceil(this.state.data[5].value) +
        Math.ceil(this.state.data[6].value));
    this.setState({
      inputValue3: e,
      data: this.state.data,
    });
    this.cenrty();
  };

  // 饮食
  onChange4 = (e) => {
    this.state.data[5].value = e * 1;
    this.state.data[7].value =
      150 -
      (Math.ceil(this.state.data[0].value) +
        Math.ceil(this.state.data[1].value) +
        Math.ceil(this.state.data[2].value) +
        Math.ceil(this.state.data[3].value) +
        Math.ceil(this.state.data[4].value) +
        Math.ceil(this.state.data[5].value) +
        Math.ceil(this.state.data[6].value));
    this.setState({
      inputValue4: e,
      data: this.state.data,
    });
    this.cenrty();
  };

  // 爱好
  onChange5 = (e) => {
    this.state.data[6].value = e * 1;
    this.state.data[7].value =
      150 -
      (Math.ceil(this.state.data[0].value) +
        Math.ceil(this.state.data[1].value) +
        Math.ceil(this.state.data[2].value) +
        Math.ceil(this.state.data[3].value) +
        Math.ceil(this.state.data[4].value) +
        Math.ceil(this.state.data[5].value) +
        Math.ceil(this.state.data[6].value));
    this.setState({
      inputValue5: e,
      data: this.state.data,
    });
    this.cenrty();
  };

  cenrty = () => {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    myChart.clear()
    option = {
      // legend: {
      //   top: "0%",
      //   textStyle: {
      //     color: this.state.menu.colorData[this.state.menu.colors][0],
      //   },
      // },
      textStyle: {
        color: this.state.menu.colorData[this.state.menu.colors][0],
      },
      tooltip: {
        trigger: "item",
      },
      color:this.state.menu.colorData[this.state.menu.colors],
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: this.state.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          itemStyle: {
            normal: {
              label: {
                //指示到模块的标签文字
                show: true,
                color: this.state.menu.colorData[this.state.menu.colors],
                formatter: "{b} : {c} \n ({d}%)",
              },
              labelLine: {
                //指示到模块的标签线
                show: true,
              },
            },
          },
          
        },
      ],
    };
    option && myChart.setOption(option);
    return () => {
      option && myChart.dispose();
    };
  };

  componentDidMount() {
    this.cenrty();
    if (this.state.menu.chartRefreshPeriod) {
      const timer = setInterval(() => {
        // console.log(this.state.menu.chartRefreshPeriod);
        this.cenrty();
        // console.log(123123123)
      }, this.state.menu.chartRefreshPeriod * 1000)
      return ()=>  clearInterval(timer)
    }
    
    // console.log(this.state.menu,123123123)
  }

  render() {
    return (
      <div className="lifetime">
        <h3>寿命预测（仅供娱乐）</h3>
        <div className="lifetime1">
          <p>
            据说各方面做到最好能活到150岁，根据右侧打分情况，预测您的寿命大约是
            <br />
            <span>{150 - this.state.data[7].value}</span>岁
          </p>
          <div id="main" style={{ width: "20vw", height: "33vh" }}></div>
        </div>
        <div className="lifetime2">
          <p>
            <span>心态：{this.state.inputValue}</span>
            <a className="time1">及其沮丧</a>
            <a className="time2">及其乐观</a>
            <Slider
              onChange={(e) => {
                this.onChange(e);
              }}
              value={this.state.inputValue}
              max={10}
            />
          </p>
          <p>
            <span>情绪：{this.state.inputValue1}</span>
            <a className="time1">急躁易怒</a>
            <a className="time2">谦和淡定</a>
            <Slider
              onChange={(e) => {
                this.onChange1(e);
              }}
              value={this.state.inputValue1}
              max={10}
            />
          </p>
          <p>
            <span>身体：{this.state.inputValue2}</span>
            <a className="time1">懒散不动</a>
            <a className="time2">坚持锻炼</a>
            <Slider
              onChange={(e) => {
                this.onChange2(e);
              }}
              value={this.state.inputValue2}
              max={10}
            />
          </p>
          <p>
            <span>作息：{this.state.inputValue3}</span>
            <a className="time1">熬夜嗜睡</a>
            <a className="time2">早睡早起</a>
            <Slider
              onChange={(e) => {
                this.onChange3(e);
              }}
              value={this.state.inputValue3}
              max={10}
            />
          </p>
          <p>
            <span>饮食：{this.state.inputValue4}</span>
            <a className="time1">暴食重口</a>
            <a className="time2">规律清淡</a>
            <Slider
              onChange={(e) => {
                this.onChange4(e);
              }}
              value={this.state.inputValue4}
              max={10}
            />
          </p>
          <p>
            <span>习惯：{this.state.inputValue5}</span>
            <a className="time1">颓废庸俗</a>
            <a className="time2">高雅艺术</a>
            <Slider
              onChange={(e) => {
                this.onChange5(e);
              }}
              value={this.state.inputValue5}
              max={10}
            />
          </p>
        </div>
      </div>
    );
  }
}
